<template>
  <div class="inquiry combground">
    <div class="container">
      <div class="comtitle"><h2 class="comh2">发起询价</h2></div>
      <div class="content">
        <div class="title">
          <img src="~/assets/images/inquiry-company.png" alt="" />
          {{ mer_name }}
        </div>
        <div class="table-wrap">
          <div class="title">产品信息填写</div>
          <Table :data="products" border>
            <table-column prop="name" label="产品名称" align="center" width="330">
              <template v-slot="{ row }">
                <div class="table-name">
                  <img :src="row.image" alt="" class="pic" />
                  <p class="name">{{ row.store_name }}</p>
                </div>
              </template>
            </table-column>
            <table-column prop="number" label="产品数量" align="center">
              <template v-slot="{ row }">
                <div class="table-quantity" style="display: flex; justify-content: center"><m-input v-model="row.number" type="number" style="width: 101px" /></div>
              </template>
            </table-column>
            <table-column prop="unit" label="单位" align="center">
              <template v-slot="{ row }">
                <div style="display: flex; justify-content: center">
                  <m-select :options="unitOptions" v-model="row.unit_name" type="grey" style="width: 101px" /></div>
              </template>
            </table-column>
            <table-column prop="operation" label="操作" align="center">
              <template v-slot="{ row }">
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                  "
                  @click="delPro(row.product_id)"
                >
                  <img src="~/assets/images/delete-btn.png" alt="" />
                  移除产品
                </div>
              </template>
            </table-column>
          </Table>
        </div>
        <div class="form-wrap">
          <m-form ref="form" :model="formData" :rules="rules" label-width="105px" label-position="right">
            <m-form-item prop="content" label="主要内容：">
              <m-input
                type="textarea"
                :autosize="{ minRows: 6 }"
                v-model="formData.content"
                placeholder="输入产品的详细要求，例如颜色、尺寸、材料、装潢工艺等规格要求，以获取准确的报价。"
              />
            </m-form-item>
            <m-form-item prop="annex" label="上传附件：">
              <m-upload @fileList="proFileList" action="#" list-type="text" :limit="1"
                tip="上传1个产品附件，文件大小限制10M以下，限制格式为PNG、JPG、WORD、PDF、ZIP。">
                <img src="~/assets/images/add.png" alt="" class="upload-icon" />
              </m-upload>
            </m-form-item>
            <m-form-item prop="code" label="验证码：">
              <div style="display: flex">
                <m-input v-model="formData.code" style="width: 250px" />
                <div class="yzmBox"><img :src="ImgCaptcha.captcha" class="objectCover cursor" @click="imgCaptcha" alt="" /></div>
              </div>
            </m-form-item>
            <m-form-item prop="agreement1" style="margin-bottom: 0">
              <m-checkbox v-model="formData.agreement1">同意发送我的联系方式给响应的供应商</m-checkbox></m-form-item>
            <m-form-item prop="agreement2"><m-checkbox v-model="formData.agreement2">我已阅读、理解并同意找包装网的。询价规则</m-checkbox></m-form-item>
            <m-form-item style="margin-top: 50px">
              <div style="display: flex; justify-content: center"><m-button width="235" @click="submit">立即发布</m-button></div>
            </m-form-item>
          </m-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn } from 'element-ui';
import MInput from '@/components/common/m-input/MInput';
import MSelect from '@/components/common/m-select/MSelect';
import MForm from '@/components/common/m-form/MForm';
import MFormItem from '@/components/common/m-form/MFormItem';
import MCheckbox from '@/components/common/m-checkbox/MCheckbox';
import MUpload from '@/components/common/m-upload/MUpload';
import MButton from '@/components/common/m-button/MButton';
import { getMerchantPros, pubInquiry, getImgCaptcha } from '@/request/api';

export default {
  name: 'Inquiry',
  components: {
    MButton,
    MUpload,
    MCheckbox,
    MFormItem,
    MForm,
    MSelect,
    MInput,
    Table,
    TableColumn
  },
  data() {
    return {
      proIds: '',
      mid: '',
      products: [],
      mer_name: '',
      unitOptions: [{ label: '个', value: '个' }, { label: '吨', value: '吨' }],
      unit: [],
      proFile: '',
      formData: {
        agreement1: 0
      },
      rules: {
        content: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        code: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        agreement2: [{ required: true, message: '请阅读并同意', trigger: 'blur' }]
      },
      ImgCaptcha: {}
    };
  },
  created() {
    this.proIds = this.$route.query.proId;
    this.mid = this.$route.query.mid;
    this.getInfo();
    this.imgCaptcha();
  },
  methods: {
    proFileList(list) {
      this.proFile = list;
    },
    imgCaptcha() {
      getImgCaptcha().then(res => {
        this.ImgCaptcha = res.data || {};
      });
    },
    submit() {
      if (!this.formData.agreement2) {
        return this.$toastVant.fail('请同意找包装网询价规则！');
      }
      let that = this;
      this.$refs.form.$refs.mForm.validate(res => {
        if (res) {
          const proArr = [];
          for (const i in that.products) {
            let tem = {
              product_id: that.products[i].product_id,
              num: that.products[i].number,
              unit_name: that.products[i].unit_name
            };
            proArr.push(tem);
          }
          let data = {
            mer_id: that.mid,
            content: that.formData.content,
            file_url: that.$common.arrToString(that.proFile),
            is_agree: Number(that.formData.agreement1),
            captcha: that.formData.code,
            key: that.ImgCaptcha.key,
            product_list: proArr
          };
          that.$toastVant.loading('提交中');
          pubInquiry(data)
            .then(res => {
              if (res.status === 200) {
                that.$toastVant.clear();
                that.$toastVant.success('提交成功！');
                setTimeout(function() {
                  that.$router.go(-1);
                }, 500);
              }
            })
            .catch(err => {
              this.$message.error(err.message);
            });
        }
      });
    },
    delPro(id) {
      if (this.products && this.products.length === 1) {
        return this.$toastVant.fail('不可移除');
      }
      for (let i in this.products) {
        if (this.products[i].product_id === id) {
          this.products.splice(i, 1);
        }
      }
    },
    getInfo() {
      let data = {
        mer_id: this.mid,
        product_id: this.proIds
      };
      getMerchantPros(data)
        .then(async res => {
          if (res.status === 200) {
            for (let i in res.data.product_list) {
              res.data.product_list[i].number = 1;
              res.data.product_list[i].unit_name = '个';
            }
            this.products = res.data.product_list;
            this.mer_name = res.data.mer.mer_name;
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.inquiry {
  padding: 60px 0;

  .content {
    padding: 65px 50px;
    margin-top: 50px;
    background-color: #fff;
    color: #666;

    .yzmBox {
      width: 135px;
      padding-left: 10px;
      height: 45px;
    }

    > .title {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 50px;

      img {
        margin-right: 15px;
      }
    }

    .table-wrap {
      margin-bottom: 30px;

      .title {
        font-weight: bold;
        margin-bottom: 15px;
      }

      .table-name {
        display: flex;
        align-items: center;
      }

      /deep/ .has-gutter {
        tr th {
          background-color: #f3f4f7;
          color: #666;
        }
      }

      .pic {
        width: 140px;
        height: 140px;
        margin-right: 15px;
      }
    }
  }
}
</style>
